<template>
	<view class="container">
		<!-- <view class="user-section">
			<image class="bg" src="https://cdjjyl.com.cn/images/index/indexTopBg.png"></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.photoUrl || '/static/missing-face.png'" @click="changeIcon()"></image>
				</view>
				<view class="user-info-contain" v-if="hasLogin">
					<view class="user-name-contain">{{userInfo.name}}</view>
				</view>
			</view>
			<view class="vip-card-box">
				<view class="b-btn" v-if="!hasLogin" @click="navTo('/pages/public/login')">
					立即登录
				</view>
				<view class="b-btn" v-if="hasLogin" @click="navTo('/package_mall/pages/set/setUserInfoName')">
					{{userInfo.name||'设置昵称'}}
				</view>
				<view class="tit">
					 <text class="yticon icon-iLinkapp-"></text> 
					<text v-if="hasLogin">当前乡村：{{communityName || '未绑定'}}</text>
					<text v-if="!hasLogin">游客</text>
				</view>
				<text class="e-m"></text>
				<text class="e-b"></text>
			</view>
		</view> -->
		<!-- <view class="cover-container" :style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
		 @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
			<image class="arc" src="/static/arc.png"></image>
			<view class="history-section icon">
				<scroll-view style="height: 100%;" scroll-y="true">

					<list-cell icon="icon-person" iconColor="#0055ff" title="我的信息" @eventClick="navTo('/pages/my/myInfo')"></list-cell> 
					<list-cell icon="icon-rili" iconColor="#00ffff" title="我的记录" @eventClick="navTo('/pages/my/myRecord')"></list-cell>
					<list-cell icon="icon-shopping" iconColor="#5500ff" title="我的商圈" @eventClick="navTo('/pages/my/myShopping')"></list-cell> 
					<list-cell icon="icon-bangzhu" iconColor="#aa557f" title="常见问题" @eventClick="navTo('/package_mall/pages/help/help')"></list-cell>
					<list-cell icon="icon-shezhi" iconColor="#e07472" title="设置" border="" @eventClick="navTo('/package_mall/pages/set/set')"></list-cell>
				</scroll-view>
			</view>
		</view> -->
		
		<!-- F1头部部分  -->
		<view class="header">
			<image src="../../static/image/userInfo_bg.png" mode=""></image>
			<view class="user_name_container .clearfix">
				<image class="avater" src="../../static/image/avatar.png" mode=""></image>
				<view class="login_container" @click="_clickGoLogin">
					<view class="login">
						<text class="user_name">未登录</text>
					</view>
					<text class="click_into">点击登录，使用应用完整功能</text>
				</view>
				<image src="../../static/image/into_user_detail.png"></image>
			</view>
		</view>
		<!-- F1头部结束 -->
		
		
		<!-- F2 个人中心功能区 开始 -->
		<view class="userMenu">
			<view class="menuItem" v-for="(item,index) in menuList" :key="index"> 
				<image class="menuIcon" :src="item.icon" mode=""></image>
				<text>{{item.title}}</text>
				<image class="menuArrow" :src="item.arrow" mode=""></image>
			</view>
			<!-- F2-1设置 开始 -->
			<view class="settingItem">
				<image class="settingIcon" src="../../static/image/Setting.png" mode=""></image>
				<text>设置</text>
				<image class="settingArrow" src="../../static/image/more.png" mode=""></image>
			</view>
			<!-- F2-1设置 结束 -->
		</view>
		<!-- F2 个人中心功能区 结束 -->
		
		<!-- F3 版本号 开始 -->
		<view class="version" 
		:style="{marginTop:this.windowHeight/1.9+'px'}">
			版本号：V0.1
		</view>
		<!-- F3 版本号 结束 -->
		
		
		
		
		<!-- tabbar -->
		<wx-tabbar></wx-tabbar>
	</view>
</template>
<script>
	import listCell from '@/components/mix-list-cell';
	import uniBadge from "@/components/uni-badge/uni-badge.vue";
	import wxTabbar from '@/components/wx-tabbar/wx-tabbar.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell,
			uniBadge,
			wxTabbar,
			uniPopup
		},
		data() {
			return {
				communityName: uni.getStorageSync("bindCommunityInfo").areaName,
				type: '',
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				toPayOrderCount: 0,
				toConfirmOrderCount: 0,
				afterSaleCount: 0,
				community: "未绑定",
				phoneNum: "",
				faceVertifyShow: false,
				userInfo:uni.getStorageSync("userInfo"),
				// 菜单数据
				menuList:[
					{
						icon:'../../static/image/favourite.png',
						title:'我的收藏',
						arrow:'../../static/image/more.png'
					},
					{
						icon:'../../static/image/myOrder.png',
						title:'我的订单',
						arrow:'../../static/image/more.png'
					},
				],
				//当前设备高度状态数据
				windowHeight:'',
			}
			
		},
		onLoad() {
			uni.hideTabBar();
			this.faceVertifyShow = this.$api.request.edition == 'dev';
			this.changeTabBar({
				index: 2
			})
				//调用API读取当前系统信息，获取屏幕尺寸
						uni.getSystemInfo({
							success: (result) => {
								 //console.log(result);
								this.windowHeight = result.windowHeight
								
								console.log('存到本地的windowHeight：',this.windowHeight);	
							}
						})
		},
		computed: {
			...mapState(['footPrint', 'applicationConfig','hasLogin']),
		},
		methods: {
			...mapMutations(['login', 'changeTabBar']),
			toggleSignPoint: function() {
				uni.navigateTo({
					url: '/package_mall/pages/point/sign'
				})
			},
			togglePopup(type, open) {
				switch (type) {
					case 'top':
						this.content = '顶部弹出 popup'
						break

					case 'bottom':
						this.content = '底部弹出 popup'
						break
					case 'center':
						this.content = '居中弹出 popup'
						break
				}
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			closeShare() {
				this.$refs.showshare.close();
			},
			inquiryOrderTotal(orderStatus) {
				let searchOptions = {
					keyArray: ['USER', 'IS_AFTER_SALE', 'ORDERSTATUS', 'ORDER_TYPE_LIST', 'IS_DELETED'],
					userUuid: this.userInfo.userUuid,
					afterSale: false,
					isDeleted: false,
					orderStatus: orderStatus,
					orderTypeList: ['0', '1', '2']
				};
				this.$api.request.searchOrderTotal(searchOptions, res => {
					if (res.body.status.statusCode === '0') {
						var total = res.body.data.total;
						if (orderStatus == '2') {
							this.toPayOrderCount = total;
						} else if (orderStatus == '1') {
							this.toConfirmOrderCount = total;
						}
					} else {
						console.log(res.body.status.errorDesc);
					}
				}, true);
			},
			inquiryAfterSaleTotal(statusList) {
				var keyArray = ['USER'];
				let searchOptions = {
					userUuid: this.userInfo.userUuid
				};
				if (statusList && statusList.length > 0) {
					keyArray.push('STATUS_LIST');
					searchOptions.statusList = statusList;
				}
				searchOptions.keyArray = keyArray;
				this.$api.request.searchAfterSaleTotal(searchOptions, res => {
					if (res.body.status.statusCode === '0') {
						var afterSaleCount = res.body.data.total;
						this.afterSaleCount = afterSaleCount;
					} else {
						console.log(res.body.status.errorDesc);
					}
				}, true);
			},
			/**
			 * 修改头像
			 */
			changeIcon() {
				let _that = this;
				if (this.hasLogin) {
					this.$api.request.uploadImage(1, uploadRes => {
						if (uploadRes.errno === 0) {
							//上传成功后获取地址并更新该地址到服务器
							var photoUrl = uploadRes.data[0];
							this.$api.request.editInfo({
								userUuid: this.userInfo.userUuid,
								actionType: 'PHOTOURL',
								photoUrl: photoUrl
							}, res => {
								if (res.body.status.statusCode === '0') {
									this.$api.msg('头像已更改');
									_that.userInfo.photoUrl = photoUrl;
								} else {
									this.$api.msg(res.body.status.errorDesc);
								}
							});
						} else {
							this.$api.msg('头像上传失败');
						}
					})
				}
			},
			_uploadOwnerHeaderImg() {
				let params = {
					userUuid: this.userInfo.userUuid,
					photoUrl: this.userInfo.photoUrl
				}
				this.$api.request.updateUserImg(params, res => {
					if (res.body.status.statusCode === '0') {
						console.log(this.userInfo.photoUrl)
					}
				});
			},
			urlTobase64(url) {
				return new Promise((resolve, reject) => {
					console.log('url', url);
					// #ifdef H5
					let imgData;
					let reader = new FileReader();
					getImageBlob(url, function(blob) {
						reader.readAsDataURL(blob);
					});
					reader.onload = function(e) {
						imgData = e.target.result;
						resolve(imgData);
					};

					function getImageBlob(_url, cb) {
						let xhr = new XMLHttpRequest();
						xhr.open("get", _url, true);
						xhr.responseType = "blob";
						xhr.onload = function() {
							if (this.status == 200) {
								if (cb) cb(this.response);
							}
						};
						xhr.send();
					}
					// #endif
					// #ifdef APP-PLUS 
					let _imageBase64List = '';
					plus.io.resolveLocalFileSystemURL(url,
						function(entry) {
							// 可通过entry对象操作test.html文件
							entry.file(function(file) {
								var fileReader = new plus.io.FileReader();
								fileReader.readAsDataURL(file);
								fileReader.onloadend = function(evt) {
									_imageBase64List = _imageBase64List.concat(evt.target.result);
									resolve(_imageBase64List);
								}
							})
						});
					// #endif
					// #ifdef MP-WEIXIN
					wx.getFileSystemManager().readFile({
						filePath: url, //选择图片返回的相对路径
						encoding: 'base64', //编码格式
						success: res => { //成功的回调
							let base64 = 'data:image/png;base64,' + res.data;
							resolve(base64);
						},
						fail: function(e) {
							console.log(e);
							reject(e);
						}
					})
					// #endif
				});
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			// 跳转到注册
			_clickGoLogin(){
				// 需要注册页面↓
				this.navTo()
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			customerService() {
				uni.navigateTo({
					url: '/package_mall/pages/help/help'
				})
			},
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
		},
		onShow() {
			//同步用户信息
			if (this.hasLogin) {
				this.$api.request.userInfoAndAreaInfo({
					userUuid: this.userInfo.userUuid,
					areaCode:this.$api.request.communityCode
				}, res => {
					if (res.body.status.statusCode === '0') {
						this.login(res.body.data);
					}
				});
			}
		}
	}
</script>
<style lang='scss'>
	.header{
		image{
			position: relative;
			width: 100%;
			height: 60vw;
		}
		/* 登录部分 */
		.user_name_container{
			width: 100%;
			position: absolute;
			top:210rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			
			/* 头像 */
			.avater{
				margin-left: 40rpx;
				width: 108rpx;
				height: 108rpx;
			}
				/* 登录文字容器 */
			.login_container{
				
				color: #FFFFFF;
				display: flex;
				flex-direction: column;
				flex: 1;
				.user_name{
					display: block;
					font-size: 34rpx;
					margin-bottom: 16rpx;
				}
				.click_into{
					font-size: 11px;
				}
			}
			/* 箭头图标 */
			image{
				margin-right: 30rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}	
	}
	/* 个人中心菜单 */
	.userMenu{
		position: absolute;
		top:340rpx;
		height: 96rpx;
		width: 100%;
		line-height: 96rpx;
		.menuItem{
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
		}
		text{
			flex: 1;
		}
		.menuIcon{
			margin-left: 20rpx;
			margin-right: 10rpx;
			width: 48rpx;
			height: 48rpx;
		}
		.menuArrow{
			width: 32rpx;
			height: 32rpx;
			margin-right: 32rpx;
		}
		
	}
	
	/* 设置 */
	.settingItem{
		margin-top: 16rpx;
		height: 96rpx;
		line-height: 96rpx;
		width: 100%;
		background-color: #FFFFFF;

		display: flex;
		align-items: center;
		justify-content: space-between;
		.settingIcon{
			margin-left: 20rpx;
			margin-right: 10rpx;
			width: 48rpx;
			height: 48rpx;
		}
		text{
			flex:1;
		}
		.settingArrow{
			width: 32rpx;
			height: 32rpx;
			margin-right: 32rpx;
		}
	}
	.version{
		text-align: center;
		color: #9F9F9F;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
	}
	
	
	
	
	page {
		background: $page-color-base;
	}


/* 	.container {
		height: 100vh;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.sign-point {
		position: absolute;
		right: 100rpx;
		text-align: center;
		color: #fff;
	}


	.sign-point-text {
		font-size: 22rpx;
		margin-top: 4rpx;
	}

	.user-info-contain {
		margin-left: 40upx;
		width: 70%;
		color: white;
	}

	.user-name-contain {
		font-size: 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	}

	.user-phone-contain {
		margin-top: 30upx;
		font-size: 28rpx;
	}

	.sign-point .iconfont {
		color: #fff;
		background: rgba(0, 0, 0, 0.1);
		width: 72rpx;
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
		border-radius: 50%;
		display: inline-block;
	}

	.customer-service {
		position: absolute;
		right: 0rpx;
		text-align: center;
		color: #fff;
	}

	.customer-service-text {
		font-size: 22rpx;
		margin-top: 4rpx;
	}

	.customer-service .iconfont {
		color: #fff;
		background: rgba(0, 0, 0, 0.1);
		width: 72rpx;
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
		border-radius: 50%;
		display: inline-block;
	}

	.user-section {
		height: 520upx;
		padding: 100upx 30upx 0;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.user-info-box {
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			font-size: $font-sm;
			color: $font-color-base;
			margin-left: 20upx;
		}
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;

		.card-bg {
			position: absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}

		.b-btn {
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx; 
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
			padding: 0 20upx;
		}

		.tit {
			font-size: $font-base;
			color: #f7d680;
			margin-bottom: 28upx;

			.yticon {
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}

		.e-b {
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}

	.cover-container {
		height: calc(100% - 470upx);
		background: $page-color-base;
		margin-top: -150upx;
		padding: 0 20upx;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20upx;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-sction {
		@extend %section;
		align-items: baseline;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;

			.b-btn {
				margin: 10px 0;
				width: 132upx;
				height: 40upx;
				text-align: center;
				line-height: 40upx;
				font-size: 22upx;
				color: #fff;
				border-radius: 10px;
				background: linear-gradient(left, #f5cb54, #9e760d);
				z-index: 1;
			}
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;

		.order-item {
			position: relative;
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}

		.yticon {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}

		.uni-badge {
			position: absolute;
			top: -2px;
			left: 30px;
			background: #dd524d;
			color: #fff;
		}
	}

	.history-section {
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;
		height: calc(100% - 20upx);

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.yticon {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 30upx 30upx 0;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}

	.nearby {
		opacity: .5;
		background-color: #000;
		position: absolute;
		right: 0px;
		top: 150upx;
		width: 200upx;
		height: 60upx;
		line-height: 60upx;
		z-index: 999;
		color: #fff;
		font-size: $font-base;
		border-radius: 100upx 0px 0px 100upx;
		text-align: center;
	} */

</style>
